<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="shortcut icon" href="../images/logo.ico" />
    <link rel="stylesheet" href="../plugin/bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet" href="../css/address.css" />
    <script src="../plugin/bootstrap/js/bootstrap.min.js"></script>
    <script src="../plugin/jQuery/jquery-3.6.0.js"></script>
    <script src="../plugin/axios.min.js"></script>

    <title>枫叶商城——Maple Leaf Store</title>
    <link rel="stylesheet" href="../css/index.css" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      .w {
        width: 75% !important;
      }

      body,
      html {
        width: 100%;
        height: auto;
        overflow-x: hidden;
      }

      /* 顶栏 */
      header {
        width: 100%;
        height: 100px;
        background-color: #fff;
      }

      header #header {
        height: 100px;
        margin: auto;
      }

      header .header_logo {
        width: 100px;
        height: 100px;
        text-align: center;
        color: rgb(240, 240, 240);
        display: inline-block;
      }

      header .header_logo img {
        height: 70px;
        width: 70px;
        transform: rotate(30deg);
      }

      header .header_logo_text {
        color: rgb(240, 50, 30);
        font-size: 14px;
      }

      header .header_search {
        text-align: center;
        margin-top: 30px;
      }

      header .header_search input {
        width: 500px;
        outline: none;
        padding: 5px 0 5px 15px;
        box-sizing: border-box;
        border: 2px solid rgb(240, 50, 30);
      }

      header .header_search button {
        width: 60px;
        height: 38px;
        margin-left: -5px;
        border: none;
        color: #fff;
        background-color: rgb(240, 50, 30);
      }

      header .header_shoppingCart {
        width: 140px;
        text-align: center;
        height: 40px;
        line-height: 40px;
        border: 1px solid rgb(240, 50, 30);
        margin-top: 30px;
      }

      header .header_shoppingCart a {
        text-decoration: none;
        color: #000;
      }

      header .header_shoppingCart img {
        width: 18px;
        height: 16px;
      }

      /* 导航栏 */
      .classify {
        width: 100%;
        height: 46px;
        background-color: rgb(240, 50, 30);
      }

      .classify .nav .nav-link {
        color: #fff;
        font-size: 20px;
        width: 120px;
      }
    </style>
  </head>

  <body>
    <!-- 顶栏 -->
    <header>
      <div id="header" class="row w justify-content-around">
        <!-- logo图 -->
        <div class="header_logo col-1">
          <a href="../index.html"
            ><img src="../images/logo_maple2.png" alt="..."
          /></a>
          <div class="header_logo_text">Maple Leaf</div>
        </div>
        <!-- 搜索框 -->
        <div class="header_search col-7">
          <input type="text" />
          <button>搜索</button>
        </div>
        <!-- 购物车 -->
        <div class="col-2 header_shoppingCart">
          <a href="../files/shoppingCart.html">
            <img src="../images/购物车_shopping.png" alt="" />
            我的购物车
          </a>
        </div>
        <div class="col-2 header_shoppingCart">
          <a href="../files/shoppingCart.html">
            <img src="../images/_订单.png" alt="" />
            我的订单
          </a>
        </div>
      </div>
    </header>
    <!-- 导航栏 -->
    <nav class="classify">
      <div class="row w m-0 mx-auto">
        <ul class="nav">
          <li class="nav-item">
            <a class="nav-link" href="../index.html">首页</a>
          </li>
          <!-- <li class="nav-item">
                    <a class="nav-link" href="#">账户设置</a>
                </li> -->
        </ul>
      </div>
    </nav>
    <main>
      <div class="row">
        <!-- <div class="col col-lg-3">
          <div class="menu-tree">
            <ul>
              <li class="menu_title">账号管理</li>
              <li><a href="#">安全设置</a></li>
              <li><a href="#">个人资料</a></li>
              <li><a href="#">个人成长信息</a></li>
              <li><a href="#">支付宝绑定设置</a></li>
              <li><a href="#">微博绑定设置</a></li>
              <li><a href="#">个人交易信息</a></li>
              <li><a href="#">收货地址</a></li>
              <li><a href="#">应用授权</a></li>
            </ul>
          </div>
        </div> -->
        <div class="col col-lg-12">
          <div class="address_head">
            <span>收货地址</span>
          </div>
          <div class="address_body">
            <div class="headTips">
              <span class="ht-type">新增收获地址</span>
            </div>
            <form>
              <div class="w message">
                <span>联&nbsp;&nbsp;系&nbsp;&nbsp;人：</span>
                <input type="text" id="consignee" />
              </div>
              <div class="w message">
                <span>性&nbsp;&nbsp;&nbsp;&nbsp;别：</span>
                <div class="form-check">
                  <input
                    class="form-check-input"
                    type="radio"
                    name="flexRadioDefault"
                    id="flexRadioDefault1"
                  />
                  <label class="form-check-label" for="flexRadioDefault1">
                    男
                  </label>
                </div>
                <div class="form-check">
                  <input
                    class="form-check-input"
                    type="radio"
                    name="flexRadioDefault"
                    id="flexRadioDefault1"
                  />
                  <label class="form-check-label" for="flexRadioDefault1">
                    女
                  </label>
                </div>
              </div>
              <div class="w message">
                <span>手&nbsp;&nbsp;机&nbsp;&nbsp;号：</span>
                <input type="text" />
              </div>
              <div class="w message">
                <span>收&nbsp;货&nbsp;地&nbsp;址：</span>
                <input type="text" />
              </div>
              <div class="w message">
                <span>标&nbsp;&nbsp;&nbsp;&nbsp;签：</span>
                <div class="form-check">
                  <input
                    class="form-check-input"
                    type="radio"
                    name="flexRadioDefault"
                    id="flexRadioDefault1"
                  />
                  <label class="form-check-label" for="flexRadioDefault1">
                    无
                  </label>
                </div>
                <div class="form-check">
                  <input
                    class="form-check-input"
                    type="radio"
                    name="flexRadioDefault"
                    id="flexRadioDefault1"
                  />
                  <label class="form-check-label" for="flexRadioDefault1">
                    公司
                  </label>
                </div>
                <div class="form-check">
                  <input
                    class="form-check-input"
                    type="radio"
                    name="flexRadioDefault"
                    id="flexRadioDefault1"
                  />
                  <label class="form-check-label" for="flexRadioDefault1">
                    家
                  </label>
                </div>
                <div class="form-check">
                  <input
                    class="form-check-input"
                    type="radio"
                    name="flexRadioDefault"
                    id="flexRadioDefault1"
                  />
                  <label class="form-check-label" for="flexRadioDefault1">
                    学校
                  </label>
                </div>
              </div>
              <input
                class="btn btn-primary"
                id="btnSave"
                type="submit"
                value="保存"
              />
            </form>
          </div>
        </div>
      </div>
    </main>
    <footer class="text-center">
      <div class="row dkhs w mx-auto">
        <div class="col-3"><span class="item1"></span> 品类齐全，轻松购物</div>
        <div class="col-3"><span class="item2"></span> 多仓直发，极速配送</div>
        <div class="col-3"><span class="item3"></span> 正品行货，精致服务</div>
        <div class="col-3"><span class="item4"></span> 天天低价，畅选无忧</div>
      </div>
      <hr />
      <p>Copyright © 2022 深圳技师学院枫叶小组（Maple Leaf Group） 版权所有</p>
      <p>项目研发小组所在地址：深圳市龙岗区龙城街道将军帽路深圳技师学院</p>
    </footer>
  </body>
</html>
<script>
  $("#btnSave").on("click", function () {
    console.log("111");
    axios({
      method: "post",
      url: "http://localhost:8080/addressBook",
      params: {
        consignee: $("#consignee"),
      },
    }).then((res) => {
      console.log("1");
    });
  });
</script>
